<template>
  <div class="addmainproducts">
    <div class="addmainproducts-box">
      <div class="history_mainBox_search a-c mb16">
        <el-select
          v-model.trim="issueSearch"
          placeholder="可输入类目名称"
          clearable
          filterable
          remote
          reserve-keyword
          :remote-method="querySearchAsync"
          :loading="loading"
          :default-first-option="true"
          @change="changeVlue"
        >
          <el-option
            v-for="item in proOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="mb16 clearfix flex">
        <div class="cascader-box fl">
          <p v-for="item in optionList" :key="item.index" class="cascader-item" :class="{activeCascader:item.sortCode===currentIndex}" @click="selectCascaderItem_1(item)">
            <span class="omit">{{ item.sortName }}</span>
            <i class="el-icon-arrow-right" />
          </p>
        </div>
        <div v-if="showLevel2" class="cascader-box fl">
          <p v-for="item in optionList2" :key="item.index" class="cascader-item" :class="{activeCascader:item.sortCode===currentIndex2}" @click="selectCascaderItem_2(item)">
            <span class="omit">{{ item.sortName }}</span>
            <i class="el-icon-arrow-right" />
          </p>
        </div>
        <div v-if="showLevel3" class="cascader-box fl">
          <p v-for="item in optionList3" :key="item.index" class="cascader-item" :class="{activeCascader:item.sortCode===currentIndex3}" @click="selectCascaderItem_3(item)">
            <span class="omit" title="23432423423">{{ item.sortName }}</span>
          </p>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="getConfirmProducts">确 定</el-button>
    </div>
  </div>
</template>
<script>
import api from '@/api';
export default {
  name: 'addMainproducts',
  props: ['sortType', 'dataList'],
  data() {
    return {
      loading: false,
      proOption: [],
      issueSearch: '',
      currentIndex: '',
      currentIndex2: '',
      currentIndex3: '',
      optionList: [],
      optionList2: [],
      optionList3: [],
      id1: '',
      id2: '',
      id3: '',
      name1: '',
      name2: '',
      name3: '',
      showLevel2: false,
      showLevel3: false,
    }
  },
  methods: {
    // 回显
    async querySearchAsync(query, cb) {
      this.loading = true
      try {
        const obj = {
          key: query,
          size: 10,
          sortType: this.sortType
        }
        var list = []
        this.proOption = []
        const restaurantsList = await api.common.fuzzySearchSort(obj)
        var restaurants = restaurantsList.data
        for (var i = 0; i < restaurantsList.data.length; i++) {
          restaurants[i].value = restaurantsList.data[i].sortName
          restaurants[i].label = restaurantsList.data[i].sortCodes
        }
        list = restaurants.map(item => {
          return { value: `${item.sortCodes}`, label: `${item.sortName}` }
        })
        if (query) {
          setTimeout(() => {
            this.loading = false
            this.proOption = list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) !== -1
            })
          }, 300)
        } else {
          setTimeout(() => {
            this.loading = false
            this.proOption = list.filter(item => {
              return item.label.toLowerCase()
            })
          }, 200)
        }
      } catch (error) {
        this.loading = false
      }
      
    },
    // 选择三级联动
    selectCascaderItem_1(item) {
      this.currentIndex = item.sortCode
      this.id1 = item.sortCode
      this.name1 = item.sortName
      this.name2 = ''
      this.name3 = ''
      this.id2 = ''
      this.id3 = ''
      this.getListProductSort2(item.sortCode)
    },
    selectCascaderItem_2(item) {
      this.currentIndex2 = item.sortCode
      this.id2 = item.sortCode
      this.name2 = item.sortName
      this.name3 = ''
      this.id3 = ''
      this.getListProductSort3(item.sortCode)
    },
    selectCascaderItem_3(item) {
      this.currentIndex3 = item.sortCode
      this.id3 = item.sortCode
      this.name3 = item.sortName
    },
    changeVlue(val) {
      const codeList = val.split(',')
      this.id1 = codeList[0] ? codeList[0] : ''
      this.id2 = codeList[1] ? codeList[1] : ''
      this.id3 = codeList[2] ? codeList[2] : ''
      if (codeList.length === 1) {
        this.optionList.forEach(item => {
          if (item.sortCode === this.id1) {
            this.currentIndex = item.sortCode
            this.name1 = item.sortName
            this.name2 = ''
            this.name3 = ''
            this.showLevel2 = false
            this.showLevel3 = false
          }
        })
      }
      if (codeList.length === 2) {
        this.getListProductSort2(this.id1, 2)
      }
      if (codeList.length === 3) {
        this.getListProductSort2(this.id1, 3)
      }
      this.issueSearch = ''
    },
    async getListProductSort2(id, echo) {
      const obj = {
        level: 2,
        sortType: this.sortType,
        sortCode: id
      }
      const listData = await api.common.listProductSort(obj)
      this.showLevel2 = true
      this.showLevel3 = false
      this.optionList2 = listData.data
      if (echo === 2) {
        this.echo2()
      } else if (echo === 3) {
        this.getListProductSort3(this.id2, 3)
      }
    },
    echo2() {
      this.optionList.forEach(item => {
        if (item.sortCode === this.id1) {
          this.currentIndex = item.sortCode
          this.name1 = item.sortName
          this.name2 = ''
          this.name3 = ''
          this.showLevel2 = true
          this.showLevel3 = false
        }
      })
      this.optionList2.forEach(item => {
        if (item.sortCode === this.id2) {
          this.currentIndex2 = item.sortCode
          this.name2 = item.sortName
          this.name3 = ''
          this.showLevel2 = true
          this.showLevel3 = false
        }
      })
    },
    echo3() {
      this.optionList.forEach(item => {
        if (item.sortCode === this.id1) {
          this.currentIndex = item.sortCode
          this.name1 = item.sortName
          this.name2 = ''
          this.name3 = ''
          this.showLevel2 = true
          this.showLevel3 = false
        }
      })
      this.optionList2.forEach(item => {
        if (item.sortCode === this.id2) {
          this.currentIndex2 = item.sortCode
          this.name2 = item.sortName
          this.name3 = ''
          this.showLevel2 = true
          this.showLevel3 = false
        }
      })
      this.optionList3.forEach(item => {
        if (item.sortCode === this.id3) {
          this.currentIndex3 = item.sortCode
          this.name3 = item.sortName
          this.showLevel2 = true
          this.showLevel3 = true
        }
      })
    },
    async getListProductSort() {
      const obj = {
        level: 1,
        sortType: this.sortType
      }
      const listData = await api.common.listProductSort(obj)
      this.optionList = listData.data
    },
    async getListProductSort2(id, echo) {
      const obj = {
        level: 2,
        sortType: this.sortType,
        sortCode: id
      }
      const listData = await api.common.listProductSort(obj)
      this.showLevel2 = true
      this.showLevel3 = false
      this.optionList2 = listData.data
      if (echo === 2) {
        this.echo2()
      } else if (echo === 3) {
        this.getListProductSort3(this.id2, 3)
      }
    },
    async getListProductSort3(id, echo) {
      const obj = {
        level: 3,
        sortType: this.sortType,
        sortCode: id
      }
      const listData = await api.common.listProductSort(obj)
      this.optionList3 = listData.data
      this.showLevel3 = true
      if (echo) {
        this.echo3()
      }
    },
    getConfirmProducts() {
      if (!this.id3) {
        this.$message.error('请选择完整的类目信息')
        return false
      }
      let params = [{
        immsortid: this.id1,
        imsorttype: this.id2,
        imtype: this.id3,
        onesortname: this.name1,
        twosortname: this.name2,
        threesortname: this.name3,
        mptype: this.sortType == 0 ? 1 : this.sortType == 3 ? 4 : 3
      }]
      let proString = this.id1+'_'+this.id2+'_'+this.id3
      let newAdd = []
      if(this.dataList.length > 0) {
        newAdd = this.dataList.filter(item => {
          return proString === item.immsortid+'_'+item.imsorttype+'_'+item.imtype
        })
      }
      if(newAdd.length > 0) {
        this.$message.error('不能重复添加主营产品')
        return false
      }
      this.$emit('confirmProductsList', params)
    }
  },
  created() {
    this.getListProductSort()
  }

}
</script>
<style lang="scss" scoped>
  .addmainproducts {    
    .addmainproducts-box {
      height: 430px;
      padding: 16px;
      box-sizing: border-box;
      margin: 16px auto;
      background: #F5F8FC;
      
      .history_mainBox_search {
  
        ::v-deep .el-input {
          width: 565px;
          margin-right: 8px;
        }
      }
      .cascader-box .activeCascader{
        color: #0C7FF2;
      }
      .cascader-box span{
          display: inline-block;
          width: 130px;
      }
      .cascader-box{
        background: #fff;
        margin-right: 14px;
        width: 178px;
        padding: 6px 0;
        height: 352px;
        overflow-y: auto;
      }
      .cascader-box:nth-child(3){
          margin-right: 0;
      }
      .cascader-item{
        height: 34px;
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px 0 20px;
        font-size: 14px;
        color: #4F5862;
        cursor: pointer;
  
        .omit {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .dialog-footer {
      padding-top: 16px;
      text-align: right;
    }
  }
</style>